<template>
  <view class="container">
    <img class="bac1" src="@/static/bac1.png" alt="bac1">
    <view class="bag">
      <view class="item" v-for="(purchase, index) in purchases2" :key="index">
        <img class="img" :src="purchase.flower.image" alt="flower image">
        <br>
        草药名称：{{ purchase.flower.name }}
        <br>
        种子数量：{{ purchase.quantity }}份
        <br>
        收货草药数量：{{ purchase.remainingQuantity }}
        <br>
        <button class="send" @click="send(purchase, index)">寄出</button>
        <button class="plant" @click="plant(purchase, index)" >种植</button>
     </view>
    </view>
     <view class="modal" v-if="show">
    <view class="modal-content">
      <text>寄出数量：</text>
      <input type="number" v-model="sendQuantity">
      <br>
      <text>收件人信息：</text>
      <input type="text">
      <br>
      <text>寄件人信息：</text>
      <input type="text">
      <br>
      <button class="confirm" @click="confirmSend">确认</button>
    </view>
     </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      purchases2: [],
      show: false,
      sendQuantity: 0, // 添加发送数量的数据绑定
    };
  },
  mounted() {
    this.loadPurchases();
  },
  created() {
  uni.$on('decreaseRemainingQuantity', this.decreaseRemainingQuantity);
},
 methods: {
    send(purchase, index){
        this.show = true;
        this.sendIndex = index; // 保存当前点击的花朵索引
        this.purchase = purchase; // 保存当前点击的花朵对象
    },
    loadPurchases() {
      const purchases2 = uni.getStorageSync('purchases2') || [];
      if (purchases2.length > 0) {
        this.purchases2 = purchases2;
      }
    },
    confirmSend() {
      if (this.sendQuantity <= this.purchase.remainingQuantity) {
        this.purchase.remainingQuantity -= this.sendQuantity; // 减少当前点击花朵的数量
        this.savePurchases();
        this.show = false; // 关闭弹窗
      } else {
        console.log('寄出数量大于剩余数量');
      }
    },
     decreaseRemainingQuantity() {
    if (purchase.remainingQuantity > 0) {
      purchase.remainingQuantity--; // 减少数量
      this.savePurchases(); // 保存修改后的购买记录
    } else {
      console.log('剩余数量已经为零');
    }
  },
    savePurchases() {
      uni.setStorageSync('purchases2', this.purchases2);
    },
   
    plant(purchase, index) {
  // 检查种子数量是否大于零
  if (purchase.quantity > 0) {
    // 减少种子数量
    purchase.quantity--;
    purchase.remainingQuantity++;
    // 保存修改后的购买记录
     uni.$emit('updateImage', index, purchase.flower.image);
     uni.$emit('pop3show');
    this.savePurchases();
     uni.navigateBack({
      delta: 1,
    });
  } else {
    uni.showToast({
      title: '种子数量不足',
      icon: 'none',
      duration: 2000 // 2秒
    });
  }
}


  }
}
</script>

<style scoped>
.container{
    display: flex;
    position: relative;
    height: 100vh;
    overflow: hidden; 
}
.bac1{
    position: absolute;
    z-index: 0;
    height: 180%;
    bottom: -50%;
    left: -10%;
    width: 120%;
}
.bag{
    display: flex;
    position: absolute;
    flex-wrap: wrap;
    z-index: 1;
    height: 137%;
    width: 100%;
    overflow-y: auto;
    margin-top: -18%;

}
.item{
    height: 40%;
    width: 30%;
    margin-top: 20%;
}
.img{
    height: 50%;
    width: 50%;
}
.send,.plant{
 margin-top: 2px;
  height: auto;
  width: 75px;
  background-color: transparent; /* 背景色透明 */
  border: 4px solid #0e590e; /* 边框为绿色 */
  border-radius: 10px;
  line-height: 20px; /* 文本垂直居中 */
  right: 20%;
}
.modal {
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
    display: flex;
    flex-wrap: wrap;
    font-size: 20px;
  width: 300px;
  background-color:#c7924f;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.modal-content button {
  left: auto;
  background-color: transparent; /* 背景色透明 */
  border: 4px solid #0e590e; /* 边框为绿色 */
  border-radius: 15px;
  cursor: pointer;
  font-size: 20px;
  height: 50px;
}
input{
    width: 50%;
}
</style>